<div class="row span8" id="reporteForm" data-bind="">
	<div class="span8 well" data-bind="visible: mostrarForm">
		<h4>Listado de Productos Consumidos por Cliente en un rango de fechas determinado</h4>
		<hr>
		<table width="100%" id="filtros">
			<tr>
				<td><label class="span2 label" for="selectEmpresa">Cliente:</label></td>
				<td colspan="3">
					<select id="selectEmpresa" data-bind="options: empresas, optionsText: 'razonSocial', value: empresa" class="span4"></select>
				</td>
			</tr>
			<tr>
				<td><label class="span2 label" for="selectDeposito">Deposito:</label></td>
				<td colspan="3">
					<select id="selectDeposito" data-bind="options: empresa().depositos, optionsText: 'nombre', value: deposito" class="span4"></select>
				</td>
			</tr>
			<tr>
				<td><label class="span2 label" for="selectTipo">Tipo de Remito:</label></td>
				<td colspan="3">
					<select id="selectTipo" data-bind="value: tipo" class="span4">
						<option value="1">Remito de Entrada</option>
						<option value="2">Orden de Trabajo</option>
						<option value="3">Remito de Salida</option>
					</select>
				</td>
			</tr>
			<tr>
				<td><label class="span2 label" for="inputDesde">Desde:</label></td>
				<td><input class="input-small" id="inputDesde" data-bind="value: desde" /></td>
				<td><label class="span2 label" for="inputHasta">Hasta:</label></td>
				<td><input class="input-small" id="inputHasta" data-bind="value: hasta" /></td>
			</tr>			
			<tr>
				<td colspan="3" align="right"><button class="btn btn-primary" data-bind="click: generar">Generar reporte</button></td>
			</tr>
		</table>
	</div>
	<div class="span8 well" data-bind="visible: mostrarReporte" style="display:none ">
		<table class="table table-striped table-bordered">
			<thead data-bind="visible: !generando()">
				<tr>
					<th>Id Remito</th>
					<th>Detalle</th>
					<th>Cantidad</th>
					<th>Fecha</th>
					<th>Observacion</th>
				</tr>
			</thead>
			<tbody data-bind="visible: generando">
				<tr>
					<td colspan="5"><span class="label label-info">Generando...</span></td>
				</tr>
			</tbody>
			<tbody data-bind="visible: !generando(), foreach: datos">
				<tr>
					<td><a data-bind="text: id, click: $root.abrir"></a></td>
					<td data-bind="text: producto"></td>
					<td data-bind="text: cantidad"></td>
					<td data-bind="text: fecha"></td>
					<td data-bind="text: observaciones ? observaciones : '&nbsp;'"></td>
				</tr>
			</tbody>
			<tfoot data-bind="visible: !generando()">
				<tr>
					<td class="alert alert-info" colspan="4">Total de Clientes: <span data-bind="text: sumatoria"></span></td>
				</tr>
			</tfoot>
			<tfoot data-bind="visible: !generando() && datos().length > 0">
				<tr>
					<td colspan="4">
						<a class="btn" data-bind="click: descarga">Descarga CSV</a>
					</td>
				</tr>
			</tfoot>
		</table>
		<div data-bind="visible: mostrarError" class="alert alert-error">
			<span data-bind="text: errorMensaje"></span>
		</div>
	</div>
</div>
<script language="javascript">
	function ReporteModelo() {
		var self = this;
		
		self.title = ko.observable("Reportes");
		self.mostrarForm = ko.observable(true);
		self.mostrarError = ko.observable(false);
		self.errorMensaje = ko.observable("");
		self.mostrarReporte = ko.observable(false);
		self.generando = ko.observable(true);
				
		self.empresas = ko.observableArray();
		self.codigos = ko.observableArray();
		self.datos = ko.observableArray();
		self.archivo = ko.observable();
		self.sumatoria = ko.computed(function() {
			var total = 0;
			ko.utils.arrayForEach(self.datos(), function(item) {
				return total += parseInt(item.cantidad);
			});
			return total;
		});

		self.empresa = ko.observable();
		self.deposito = ko.observable();
		self.tipo = ko.observable();
		var nuevafecha = new Date();
		self.desde = ko.observable(nuevafecha.getDate() + "/" + (nuevafecha.getMonth()+1) + "/" + nuevafecha.getFullYear());		
		self.hasta = ko.observable(nuevafecha.getDate() + "/" + (nuevafecha.getMonth()+1) + "/" + nuevafecha.getFullYear());		

		self.cargaEmpresas = function() {
			var exitoEmpresa = function(empresas) {
				if(empresas.status != "OK") {
				} else {
					var emp = new CEmpresa();
					emp.mockup();
					emp.razonSocial("Todas");
					emp.depositos = new Array();
					self.empresas().push(emp);
					var dep = new CDeposito();
					dep.mockup(emp.id());
					dep.nombre("Todos");
					emp.depositos.push(dep);

					for(var i=0; i< empresas.data.length; i++) {
						var emp = new CEmpresa();
						emp.cargar(empresas.data[i]);
						emp.depositos = new Array();
						for(var j=0; j< empresas.data[i].depositos.length; j++) {
							var dep = new CDeposito();
							dep.cargar(empresas.data[i].depositos[j]);
							emp.depositos.push(dep);
						}
						self.empresas().push(emp);
					}
				}
				self.empresa(self.empresas()[0]);
				self.deposito(self.empresas()[0].depositos[0]);
			};
			var fallaEmpresa = function(data) {
			};
			getDataSync("./servidor/sterilav.php?op=listaEmpresas",exitoEmpresa,fallaEmpresa);
		};
		self.cargaChoferes = function() {
			var exitoChofer = function(choferes) {
				if(choferes.status != "OK") {
				} else {
					for(var i=0; i< choferes.data.length; i++) {
						self.choferes().push(choferes.data[i]);
					}
				}
			};
			var fallaChofer = function(data) {
			};
			getDataSync("./servidor/sterilav.php?op=listaChoferes",exitoChofer,fallaChofer);
		};
		self.cargaVehiculos = function() {
			var exitoVehiculo = function(vehiculos) {
				if(vehiculos.status != "OK") {
				} else {
					for(var i=0; i< vehiculos.data.length; i++) {
						self.vehiculos().push(vehiculos.data[i]);
					}
				}
			};
			var fallaVehiculo = function(data) {
			};
			getDataSync("./servidor/sterilav.php?op=listaVehiculos",exitoVehiculo,fallaVehiculo);
		};
		self.cargaProductos = function() {
			var exitoDelProducto = function(productos) {
				if(productos.status != "OK") {
				} else {
					for(var i=0; i< productos.data.length; i++) {
						self.codigos().push(productos.data[i]);
					}
				}
			};
			var fallaProducto = function(data) {
			};
			getDataSync("./servidor/sterilav.php?op=listaProductosParaRemito",exitoDelProducto,fallaProducto);
		};
		self.carga = function() {
			self.cargaEmpresas();
			self.cargaProductos();
		};
		
		self.carga();
		
		self.productos = ko.computed(function() {
			if(!self.deposito()) {
				return self.codigos();
			} else {
				return ko.utils.arrayFilter(self.codigos(), function(item) {
					return item.deposito == self.deposito().id();
				});		
			}
		}, this);		
		
		self.generar = function() {
			self.mostrarReporte(true);
			var exito = function(data) {
				if(data.status!="OK") {
					self.mostrarError(true);
					self.generando(false);
					self.errorMensaje(data.data);
				} else {
					self.datos(data.data);
					self.archivo(data.archivo);
					self.generando(false);
				}
			};
			var error = function(data) {
				self.mostrarError(true);
				self.generando(false);
				self.errorMensaje(data.data);
			};
			var requestBody = {
				tipo: self.tipo(),
				deposito: self.deposito().id,
				desde: self.desde(),
				hasta: self.hasta()
			};
			postData("./servidor/sterilav.php?op=reporte&reporte=1&id=" + self.tipo(),exito,error,requestBody);
		};
		
		self.abrir = function(dato) {
			amplify.store.sessionStorage("sterilav.remitoEditado", dato.id);
			$("#container").load("./cliente/paginas/remitoEntrada.html?id=" + dato.id);
		};

		self.descarga = function() {
			window.open("servidor/"+self.archivo(),"_blank");
		};

	}
	
	var reporteModelo = new ReporteModelo();
	ko.applyBindings(reporteModelo, document.getElementById("reporteForm"));  	
</script>